<template>
  <div>
    <h1 @click="add">{{ count }}</h1>

    <input v-model="title" @keyup.enter="addTodo" />
    <button @click="clear">清理</button>

    <ul>
      <li v-for="item in todoList">
        <input v-model="item.done" type="checkbox" />
        <span>{{ item.name }}</span>
      </li>
    </ul>

    <input v-model="allDone" type="checkbox" />
    <div>{{ active }} / {{ all }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useTodo } from './todoHook.js';

let count = ref(0);
let color = ref('red');

function add() {
  count.value++;
  color.value = Math.random() > 0.5 ? 'blue' : 'red';
}

/** 全部数量 */
const { addTodo, clear, all, active, allDone, todoList, title } = useTodo();
</script>

<style>
h1 {
  color: v-bind(color);
}
</style>
